<script setup>
import {watch, provide, onMounted} from 'vue';
const props = defineProps({
    modelValue: {
        type: String,
        default: ''
    }
})
const emit = defineEmits([
    'update:modelValue'
]);
const radioList = [];
const notifyChecked = (value) => {
    radioList.forEach(item => {
        if(item.value == value){
            item.cb(true);
            emit('update:modelValue', value);
        }else{
            item.cb(false);
        }
    });
}
provide('notifyMounted', (value, cb) => {
   
    radioList.push({
        value,
        cb
    })
})
provide('notifyChecked', notifyChecked);
watch(() => props.modelValue, (newValue) => {
    notifyChecked(newValue);
})
onMounted(() => {
    notifyChecked(props.modelValue);
})
</script>
<template>
    <div class="ld-radio-group">
        <slot></slot>
    </div>
</template>
<style lang="scss">
.ld-radio-group{
    .ld-radio{
        &:not(:first-child){
            margin-left: 10px;
        }
    }
}
</style>